<template>
  <!--孖洲岛碳排汇总-->
  <div class="innerBox">
    <div class="search">
      <SearchForm
        ref="searchFormRef"
        :formInputs="state.formInputs"
        @submit="getList"
      />
      <a-button @click="onExportExcel" type="primary" link
        ><template #icon>
          <file-excel-outlined />
        </template>
        导出</a-button
      >
    </div>
    <div class="tables">
      <template v-if="state.factorySource">
        <div class="inner">
          <div class="left">集团内部</div>
          <div class="right">
            <table style="background-color: rgb(221, 235, 247)">
              <thead>
                <tr>
                  <td rowspan="2" style="width: 100px">名称</td>
                  <td rowspan="2" style="width: 90px">单位</td>
                  <td colspan="13">
                    {{ state.factorySource.title }}-实物量（总能耗）
                  </td>
                </tr>
                <tr>
                  <td>1月</td>
                  <td>2月</td>
                  <td>3月</td>
                  <td>4月</td>
                  <td>5月</td>
                  <td>6月</td>
                  <td>7月</td>
                  <td>8月</td>
                  <td>9月</td>
                  <td>10月</td>
                  <td>11月</td>
                  <td>12月</td>
                  <td>合计</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(o, i) in state.factorySource.monitor">
                  <td>{{ o.name }}</td>
                  <td>{{ o.unit }}</td>
                  <td v-for="(month, j) in o.months">
                    {{ month.toFixed(2) }}
                  </td>
                  <td>{{ _.sum(o.months).toFixed(2) }}</td>
                </tr>
              </tbody>
            </table>
            <table style="background-color: rgb(252, 228, 214)">
              <thead>
                <tr>
                  <td rowspan="2" style="width: 100px">能源品种</td>
                  <td rowspan="2" style="width: 90px">碳排放因子</td>
                  <td colspan="13">
                    {{ state.factorySource.title }}-碳排放量（t）
                  </td>
                </tr>
                <tr>
                  <td>1月</td>
                  <td>2月</td>
                  <td>3月</td>
                  <td>4月</td>
                  <td>5月</td>
                  <td>6月</td>
                  <td>7月</td>
                  <td>8月</td>
                  <td>9月</td>
                  <td>10月</td>
                  <td>11月</td>
                  <td>12月</td>
                  <td>合计</td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(o, i) in _.filter(
                    state.factorySource.monitor,
                    (o) => o.name != '总产值'
                  )"
                >
                  <td>{{ o.name }}</td>
                  <td>
                    {{ o.factor }}
                  </td>
                  <td v-for="month in o.months">
                    {{ month ? (month * o.factor * o.ratio).toFixed(3) : "-" }}
                  </td>
                  <td>
                    {{
                      _.sum(
                        _.map(o.months, (month) => month * o.factor * o.ratio)
                      ).toFixed(3)
                    }}
                  </td>
                </tr>
                <tr style="height: 41px">
                  <td colspan="2">碳排放量(因子指标)(t)</td>
                  <td
                    v-for="(_, index) in state.factorySource.monitor[0].months"
                  >
                    {{ computedFactor(state.factorySource.monitor, index) }}
                  </td>
                  <td>{{ factorAll(state.factorySource.monitor) }}</td>
                </tr>
                <template v-if="state.factorySource.title === '孖洲岛'">
                  <tr
                    style="height: 41px; background-color: rgb(255, 242, 204)"
                  >
                    <td colspan="2">{{ factorCategory[14] }}</td>
                    <td
                      v-for="(_, index) in state.factorySource.monitor[0]
                        .months"
                    >
                      {{ (state.ri / 12).toFixed(3) }}
                    </td>
                    <td>{{ state.ri }}</td>
                  </tr>
                  <tr
                    style="height: 41px; background-color: rgb(221, 235, 247)"
                  >
                    <td colspan="2">碳排放强度(因子指标)(t/万元)</td>
                    <td
                      v-for="(_, index) in state.factorySource.monitor[0]
                        .months"
                      :style="{
                        'background-color':
                          computedStrong(state.factorySource.monitor, index) >
                          state.ri_a
                            ? '#e9a4a4'
                            : null,
                      }"
                    >
                      {{ computedStrong(state.factorySource.monitor, index) }}
                    </td>
                    <td>{{ strongAll(state.factorySource.monitor) }}</td>
                  </tr>
                  <tr
                    style="height: 41px; background-color: rgb(255, 242, 204)"
                  >
                    <td colspan="2">{{ factorCategory[15] }}(t/万元)</td>
                    <td
                      v-for="(_, index) in state.factorySource.monitor[0]
                        .months"
                    >
                      {{ state.ri_a }}
                    </td>
                    <td>{{ state.ri_a }}</td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>

        <div class="inner">
          <div class="left">政府核查</div>
          <div class="right">
            <table style="background-color: rgb(221, 235, 247)">
              <thead>
                <tr>
                  <td rowspan="2" style="width: 100px">名称</td>
                  <td rowspan="2" style="width: 90px">单位</td>
                  <td colspan="13">
                    {{ state.factorySource.title }}-实物量（总能耗）
                  </td>
                </tr>
                <tr>
                  <td>1月</td>
                  <td>2月</td>
                  <td>3月</td>
                  <td>4月</td>
                  <td>5月</td>
                  <td>6月</td>
                  <td>7月</td>
                  <td>8月</td>
                  <td>9月</td>
                  <td>10月</td>
                  <td>11月</td>
                  <td>12月</td>
                  <td>合计</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(o, i) in state.factorySource.verify">
                  <td>{{ o.name }}</td>
                  <td>{{ o.unit }}</td>
                  <td v-for="(month, j) in o.months">
                    {{ month.toFixed(2) }}
                  </td>
                  <td>{{ _.sum(o.months).toFixed(2) }}</td>
                </tr>
              </tbody>
            </table>
            <table style="background-color: rgb(252, 228, 214)">
              <thead>
                <tr>
                  <td rowspan="2" style="width: 100px">能源品种</td>
                  <td rowspan="2" style="width: 90px">碳排放因子</td>
                  <td colspan="13">
                    {{ state.factorySource.title }}-碳排放量（t）
                  </td>
                </tr>
                <tr>
                  <td>1月</td>
                  <td>2月</td>
                  <td>3月</td>
                  <td>4月</td>
                  <td>5月</td>
                  <td>6月</td>
                  <td>7月</td>
                  <td>8月</td>
                  <td>9月</td>
                  <td>10月</td>
                  <td>11月</td>
                  <td>12月</td>
                  <td>合计</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(o, i) in state.factorySource.verify">
                  <td>{{ o.name }}</td>
                  <td>
                    {{ o.factor }}
                  </td>
                  <td v-for="month in o.months">
                    {{ month ? (month * o.factor * o.ratio).toFixed(3) : "-" }}
                  </td>
                  <td>
                    {{
                      _.sum(
                        _.map(o.months, (month) => month * o.factor * o.ratio)
                      ).toFixed(3)
                    }}
                  </td>
                </tr>
                <tr style="height: 41px">
                  <td colspan="2">碳排放量(因子指标)(t)</td>
                  <td
                    v-for="(_, index) in state.factorySource.verify[0]?.months"
                  >
                    {{ computedFactor(state.factorySource.verify, index) }}
                  </td>
                  <td>{{ factorAll(state.factorySource.verify) }}</td>
                </tr>
                <tr style="height: 41px">
                  <td colspan="2">深圳市碳配额(t)</td>
                  <td colspan="13">{{ state.quota || "-" }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted, toRaw } from "vue";
import _ from "lodash";
import SearchForm from "@/components/SearchForm.vue";
import dayjs from "dayjs";
import { companys, factorCategory } from "@/utils/source.js";
import { exportExcel, setCellStyle, wordIndex } from "@/utils/exportExcel";

const year = dayjs().year();
const yearOpts = [];
for (let i = 0; i < 20; i++) {
  const _year = year - i;
  yearOpts.push({ label: `${_year}年`, value: _year });
}

const { proxy } = getCurrentInstance();
const state = reactive({
  formInputs: [
    {
      label: "船厂",
      type: "select",
      name: "factory",
      options: _.map(companys, (v, k) => ({ label: v, value: v })),
      defaultValue: companys["1"],
    },
    {
      label: "年份",
      type: "select",
      name: "year",
      options: yearOpts,
      defaultValue: year,
    },
  ],
  factorySource: null,
  factors: null,
  ri: 0,
  ri_a: 0,
  quota: 0,
});

const getList = async ({ factory, year }) => {
  const result = { title: factory };
  const { success, data } = await proxy.$axios.get("/energy_monitor/list", {
    params: { company: factory, year, type: 1 },
  });
  if (success && data.length) {
    result.monitor = data;
  }

  const r = await proxy.$axios.get("/energy_monitor/list", {
    params: { company: factory, year, type: 2 },
  });
  if (r.success) {
    result.verify = r.data;
  }

  state.factorySource = result;

  const quotaTitle = `${factory}-深圳市碳配额`;
  const factors = toRaw(state.factors);
  const one = _.find(factors, {
    name: quotaTitle,
    year,
  });
  if (one) {
    state.quota = one.value;
  } else {
    state.quota = 0;
  }
  const one1 = _.find(factors, {
    name: factorCategory[14],
    year: year,
  });
  if (one1) {
    state.ri = one1.value;
  } else {
    state.ri = 0;
  }
  const one2 = _.find(factors, {
    name: factorCategory[15],
    year: year,
  });
  if (one2) {
    state.ri_a = one2.value;
  } else {
    state.ri_a = 0;
  }
};

const getConfig = async () => {
  const r = await proxy.$axios.get("/config/list");
  if (r.success) {
    state.factors = r.data;
  }
};

onMounted(() => {
  getConfig().then(() => {
    getList({ factory: companys["1"], year: year });
  });
});

// 计算碳排量
const computedFactor = (source, index) => {
  const list = _.filter(source, (o) => o.name !== "总产值");
  const total = _.sum(
    _.map(list, (obj) => {
      return obj.months[index] * obj.factor * obj.ratio;
    })
  );
  return total ? total.toFixed(3) : "-";
};

// 总碳排量
const factorAll = (source) => {
  const list = _.filter(source, (o) => o.name !== "总产值");
  const all = [];
  _.each(list, (o) => {
    _.each(o.months, (month) => {
      all.push(month * o.factor * o.ratio);
    });
  });
  const total = _.sum(all);
  return total ? total.toFixed(3) : "-";
};

// 计算碳排强度
const computedStrong = (source, index) => {
  const list = _.filter(source, (o) => o.name !== "总产值");
  const total = _.sum(
    _.map(list, (obj) => {
      return obj.months[index] * obj.factor * obj.ratio;
    })
  );

  let ratio = 0;
  const one = _.find(source, (o) => o.name === "总产值");
  if (one) {
    const money = one.months[index];
    ratio = total / money;
  }
  return ratio ? ratio.toFixed(3) : "-";
};

const strongAll = (source) => {
  const list = _.filter(source, (o) => o.name !== "总产值");
  const all = [];
  _.each(list, (o) => {
    _.each(o.months, (month) => {
      all.push(month * o.factor * o.ratio);
    });
  });
  const total = _.sum(all);

  let ratio = 0;
  const one = _.find(source, (o) => o.name === "总产值");
  if (one) {
    const money = _.sum(one.months);
    ratio = total / money;
  }
  return ratio ? ratio.toFixed(3) : "-";
};

const onExportExcel = () => {
  const company = state.factorySource.title;
  exportExcel(`${company}碳排放`, `${company}碳排放`, 16, (worksheet) => {
    let i = 2;

    /******************************************************集团内部****************************************************/
    const t1 = worksheet.getCell(`A${i}`);
    t1.value = `集团内部`;
    setCellStyle(t1);

    /***************************实物量*************************/
    let bgColor = "FFDDEBF7";
    let cellB = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:B${i + 1}`);
    cellB.value = "名称";
    setCellStyle(cellB, bgColor);

    let cellC = worksheet.getCell(`C${i}`);
    worksheet.mergeCells(`C${i}:C${i + 1}`);
    cellC.value = "单位";
    setCellStyle(cellC, bgColor);

    let cellD = worksheet.getCell(`D${i}`);
    worksheet.mergeCells(`D${i}:P${i}`);
    cellD.value = `${company}-实物量(总能耗)`;
    setCellStyle(cellD, bgColor);

    const wordStartIndex = wordIndex.indexOf("D");
    // 换行
    i = i + 1;
    // 遍历12个月
    for (let index = 0; index < 12; index++) {
      const cell_ = worksheet.getCell(
        `${wordIndex[wordStartIndex + index]}${i}`
      );
      cell_.value = `${index + 1}月`;
      setCellStyle(cell_, bgColor);
    }
    let cellP = worksheet.getCell(`P${i}`);
    cellP.value = `合计`;
    setCellStyle(cellP, bgColor);

    _.each(state.factorySource.monitor, (o) => {
      // 换行
      i++;
      const cell_B = worksheet.getCell(`B${i}`);
      cell_B.value = o.name;
      setCellStyle(cell_B, bgColor);

      const cell_C = worksheet.getCell(`C${i}`);
      cell_C.value = o.unit;
      setCellStyle(cell_C, bgColor);

      for (let index = 0; index <= 12; index++) {
        const cell_ = worksheet.getCell(
          `${wordIndex[wordStartIndex + index]}${i}`
        );
        const month = o.months[index];
        cell_.value = month?.toFixed(2) || "-";
        setCellStyle(cell_, bgColor);
      }

      const cell_P = worksheet.getCell(`P${i}`);
      cell_P.value = _.sum(o.months).toFixed(2);
      setCellStyle(cell_P, bgColor);
    });
    // 空格1行
    i = i + 1;

    /***************************碳排放*************************/
    bgColor = "FFFCE4D6";
    cellB = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:B${i + 1}`);
    cellB.value = "能源品种";
    setCellStyle(cellB, bgColor);

    cellC = worksheet.getCell(`C${i}`);
    worksheet.mergeCells(`C${i}:C${i + 1}`);
    cellC.value = "碳排放因子";
    setCellStyle(cellC, bgColor);

    cellD = worksheet.getCell(`D${i}`);
    worksheet.mergeCells(`D${i}:P${i}`);
    cellD.value = `${company}--碳排放量(t)`;
    setCellStyle(cellD, bgColor);

    // 换行
    i = i + 1;
    // 遍历12个月
    for (let index = 0; index <= 12; index++) {
      const cell_ = worksheet.getCell(
        `${wordIndex[wordStartIndex + index]}${i}`
      );
      cell_.value = `${index + 1}月`;
      setCellStyle(cell_, bgColor);
    }
    cellP = worksheet.getCell(`P${i}`);
    cellP.value = `合计`;
    setCellStyle(cellP, bgColor);
    _.each(
      _.filter(state.factorySource.monitor, (o) => o.name != "总产值"),
      (o) => {
        // 换行
        i++;
        const cell_B = worksheet.getCell(`B${i}`);
        cell_B.value = o.name;
        setCellStyle(cell_B, bgColor);

        const cell_C = worksheet.getCell(`C${i}`);
        cell_C.value = o.factor;
        setCellStyle(cell_C, bgColor);

        for (let index = 0; index <= 12; index++) {
          const cell_ = worksheet.getCell(
            `${wordIndex[wordStartIndex + index]}${i}`
          );
          const month = o.months[index];
          cell_.value = month ? (month * o.factor * o.ratio).toFixed(3) : "-";
          setCellStyle(cell_, bgColor);
        }

        const cell_P = worksheet.getCell(`P${i}`);
        cell_P.value = _.sum(
          _.map(o.months, (month) => month * o.factor * o.ratio)
        ).toFixed(3);
        setCellStyle(cell_P, bgColor);
      }
    );
    // 碳排放量(因子指标)
    {
      i++;
      const cell_B = worksheet.getCell(`B${i}`);
      worksheet.mergeCells(`B${i}:C${i}`);
      cell_B.value = "碳排放量(因子指标)(t)";
      setCellStyle(cell_B, bgColor);
      for (let index = 0; index <= 12; index++) {
        const cell_ = worksheet.getCell(
          `${wordIndex[wordStartIndex + index]}${i}`
        );
        cell_.value = computedFactor(state.factorySource.monitor, index);
        setCellStyle(cell_, bgColor);
      }
      const cell_P = worksheet.getCell(`P${i}`);
      cell_P.value = factorAll(state.factorySource.monitor);
      setCellStyle(cell_P, bgColor);
    }

    if (state.factorySource.title === "孖洲岛") {
      {
        i++;
        const cell_B = worksheet.getCell(`B${i}`);
        worksheet.mergeCells(`B${i}:C${i}`);
        cell_B.value = factorCategory[14];
        setCellStyle(cell_B, bgColor);
        for (let index = 0; index <= 12; index++) {
          const cell_ = worksheet.getCell(
            `${wordIndex[wordStartIndex + index]}${i}`
          );
          cell_.value = (state.ri / 12).toFixed(3);
          setCellStyle(cell_, bgColor);
        }
        const cell_P = worksheet.getCell(`P${i}`);
        cell_P.value = state.ri;
        setCellStyle(cell_P, bgColor);
      }
      {
        i++;
        const cell_B = worksheet.getCell(`B${i}`);
        worksheet.mergeCells(`B${i}:C${i}`);
        cell_B.value = "碳排放强度(因子指标)(t/万元)";
        setCellStyle(cell_B, bgColor);
        for (let index = 0; index <= 12; index++) {
          const cell_ = worksheet.getCell(
            `${wordIndex[wordStartIndex + index]}${i}`
          );
          cell_.value = computedStrong(state.factorySource.monitor, index);
          setCellStyle(cell_, bgColor);
        }
        const cell_P = worksheet.getCell(`P${i}`);
        cell_P.value = strongAll(state.factorySource.monitor);
        setCellStyle(cell_P, bgColor);
      }
      {
        i++;
        const cell_B = worksheet.getCell(`B${i}`);
        worksheet.mergeCells(`B${i}:C${i}`);
        cell_B.value = factorCategory[15];
        setCellStyle(cell_B, bgColor);
        for (let index = 0; index <= 12; index++) {
          const cell_ = worksheet.getCell(
            `${wordIndex[wordStartIndex + index]}${i}`
          );
          cell_.value = state.ri_a;
          setCellStyle(cell_, bgColor);
        }
        const cell_P = worksheet.getCell(`P${i}`);
        cell_P.value = state.ri_a;
        setCellStyle(cell_P, bgColor);
      }
    }

    // 集团内部垂直合并A
    worksheet.mergeCells(`A2:A${i}`);

    // 换行
    i = i + 2;
    const start_i = i;
    /******************************************************政府核查****************************************************/
    const _t1 = worksheet.getCell(`A${i}`);
    _t1.value = `政府核查`;
    setCellStyle(_t1);

    /***************************实物量*************************/
    bgColor = "FFDDEBF7";
    cellB = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:B${i + 1}`);
    cellB.value = "名称";
    setCellStyle(cellB, bgColor);

    cellC = worksheet.getCell(`C${i}`);
    worksheet.mergeCells(`C${i}:C${i + 1}`);
    cellC.value = "单位";
    setCellStyle(cellC, bgColor);

    cellD = worksheet.getCell(`D${i}`);
    worksheet.mergeCells(`D${i}:P${i}`);
    cellD.value = `${company}-实物量(总能耗)`;
    setCellStyle(cellD, bgColor);

    // 换行
    i = i + 1;
    // 遍历12个月
    for (let index = 0; index < 12; index++) {
      const cell_ = worksheet.getCell(
        `${wordIndex[wordStartIndex + index]}${i}`
      );
      cell_.value = `${index + 1}月`;
      setCellStyle(cell_, bgColor);
    }
    cellP = worksheet.getCell(`P${i}`);
    cellP.value = `合计`;
    setCellStyle(cellP, bgColor);

    _.each(state.factorySource.verify, (o) => {
      // 换行
      i++;
      const cell__B = worksheet.getCell(`B${i}`);
      cell__B.value = o.name;
      setCellStyle(cell__B, bgColor);

      const cell__C = worksheet.getCell(`C${i}`);
      cell__C.value = o.unit;
      setCellStyle(cell__C, bgColor);

      for (let index = 0; index <= 12; index++) {
        const cell_ = worksheet.getCell(
          `${wordIndex[wordStartIndex + index]}${i}`
        );
        const month = o.months[index];
        cell_.value = month?.toFixed(2) || "-";
        setCellStyle(cell_, bgColor);
      }

      const cell__P = worksheet.getCell(`P${i}`);
      cell__P.value = _.sum(o.months).toFixed(2);
      setCellStyle(cell__P, bgColor);
    });
    // 空格1行
    i = i + 1;

    /***************************碳排放*************************/
    bgColor = "FFFCE4D6";
    cellB = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:B${i + 1}`);
    cellB.value = "能源品种";
    setCellStyle(cellB, bgColor);

    cellC = worksheet.getCell(`C${i}`);
    worksheet.mergeCells(`C${i}:C${i + 1}`);
    cellC.value = "碳排放因子";
    setCellStyle(cellC, bgColor);

    cellD = worksheet.getCell(`D${i}`);
    worksheet.mergeCells(`D${i}:P${i}`);
    cellD.value = `${company}--碳排放量(t)`;
    setCellStyle(cellD, bgColor);

    // 换行
    i = i + 1;
    // 遍历12个月
    for (let index = 0; index <= 12; index++) {
      const cell_ = worksheet.getCell(
        `${wordIndex[wordStartIndex + index]}${i}`
      );
      cell_.value = `${index + 1}月`;
      setCellStyle(cell_, bgColor);
    }
    cellP = worksheet.getCell(`P${i}`);
    cellP.value = `合计`;
    setCellStyle(cellP, bgColor);
    _.each(
      _.filter(state.factorySource.verify, (o) => o.name != "总产值"),
      (o) => {
        // 换行
        i++;
        const cell__B = worksheet.getCell(`B${i}`);
        cell__B.value = o.name;
        setCellStyle(cell__B, bgColor);

        const cell__C = worksheet.getCell(`C${i}`);
        cell__C.value = o.factor;
        setCellStyle(cell__C, bgColor);

        for (let index = 0; index <= 12; index++) {
          const cell_ = worksheet.getCell(
            `${wordIndex[wordStartIndex + index]}${i}`
          );
          const month = o.months[index];
          cell_.value = month ? (month * o.factor * o.ratio).toFixed(3) : "-";
          setCellStyle(cell_, bgColor);
        }

        const cell__P = worksheet.getCell(`P${i}`);
        cell__P.value = _.sum(
          _.map(o.months, (month) => month * o.factor * o.ratio)
        ).toFixed(3);
        setCellStyle(cell__P, bgColor);
      }
    );
    // 碳排放量(因子指标)
    i++;
    const cell__B = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:C${i}`);
    cell__B.value = "碳排放量(因子指标)(t)";
    setCellStyle(cell__B, bgColor);

    for (let index = 0; index <= 12; index++) {
      const cell_ = worksheet.getCell(
        `${wordIndex[wordStartIndex + index]}${i}`
      );
      cell_.value = computedFactor(state.factorySource.monitor, index);
      setCellStyle(cell_, bgColor);
    }
    const cell__P = worksheet.getCell(`P${i}`);
    cell__P.value = factorAll(state.factorySource.monitor);
    setCellStyle(cell__P, bgColor);

    // 碳排放量(因子指标)
    i++;
    const quota_B = worksheet.getCell(`B${i}`);
    worksheet.mergeCells(`B${i}:C${i}`);
    quota_B.value = "深圳市碳配额(t)";
    setCellStyle(quota_B, bgColor);

    const quota_D = worksheet.getCell(`D${i}`);
    worksheet.mergeCells(`D${i}:P${i}`);
    quota_D.value = state.quota || "-";
    setCellStyle(quota_D, bgColor);

    // 集团内部垂直合并A
    worksheet.mergeCells(`A${start_i}:A${i}`);
  });
};
</script>

<style lang="less" scoped>
.innerBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .tables {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #181818;
    padding: 2px;

    .inner {
      display: flex;
      align-items: center;
      border: 1px solid #fff;

      .left {
        width: 20px;
        text-align: center;
        font-size: 16px;
      }

      .right {
        flex: 1;

        table {
          width: 100%;
          margin: 4px;
          color: #000;
        }

        th,
        td {
          border: 1px solid #000;
          text-align: center;
          padding: 4px;
          width: 85.8px;
        }
      }
    }
  }
}
</style>
